.login-box {
	width: 330px;
	height: 250px;
	border: 1px #ccc solid;
	border-radius: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(251, 252, 255);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	grid-row: 30px auto;

	.login-head {
		padding: 5px 20px;
		height: 45px;
		width: 100%;
		line-height: 35px;
		font-size: 20px;
		border-bottom: 1px solid #ccc;
		font-family: 'Berlin Sans FB Demi';
		font-weight: bold;
		box-sizing: border-box;
	}
	.input-group {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0px 20px;
	}

	.input-group .input-box {
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 4px;
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		transition: all 0.3s;
	}

	.input-group .input-box input {
		box-sizing: border-box;
		padding: 10px 7px;
		outline: none;
		border: none;
		background-color: transparent;
	}
	.input-group input[type='password']::-ms-reveal {
		display: none;
	}
	.input-group .input-box input::after {
		content: '1';
		display: block;
		width: 100px;
		height: 100px;
		font-size: 23px;
	}

	.input-group .input-box:has(input:focus) {
		border-color: #4581c0;
	}

	.input-group .input-box:has(input:focus) svg {
		opacity: 1;
	}

	.input-group .input-box svg {
		height: 35px;
		width: auto;
		opacity: 0;
		transition: all 0.2s;
	}

	.login-button {
		width: 100%;
		font-size: 13px;
		padding: 30px 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.login-button a {
		user-select: none;
		color: #4677bb;
	}

	.login-button button {
		user-select: none;
		font-family: 'Berlin Sans FB Demi';
		font-size: 15px;
		color: white;
		background-color: #036bcc;
		border: none;
		padding: 8px 16px;
		font-weight: bold;
		border-radius: 8px;
	}
}
